{% extends "base/base.html" %}
{% load static %}
{% block css %}
    <!--LOADING 时间插件 FOR PAGE-->
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-colorpicker/css/colorpicker.css' %}">#}
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-datepicker/css/datepicker.css' %}">#}
    {#    <link type="text/css" rel="stylesheet"#}
    {#          href="{% static 'vendors/bootstrap-daterangepicker/daterangepicker-bs3.css' %}">#}
    {#    <link type="text/css" rel="stylesheet"#}
    {#          href="{% static 'vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css' %}">#}
    {#    <link type="text/css" rel="stylesheet"#}
    {#          href="{% static 'vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css' %}">#}
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-clockface/css/clockface.css' %}">#}
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-switch/css/bootstrap-switch.css' %}">#}

    <!--LOADING STYLESHEET FOR UPLOAD PAGE-->
    <link type="text/css" rel="stylesheet" href="{% static 'vendors/jquery-file-upload/css/jquery.fileupload.css' %}">
    <link type="text/css" rel="stylesheet"
          href="{% static 'vendors/jquery-file-upload/css/jquery.fileupload-ui.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'vendors/jquery-file-upload/css/blueimp-gallery.min.css' %}">

{% endblock %}

{% block right_menus %}
    <li><i class="fa fa-home"></i>&nbsp;<a href="{% url 'product:index' %}">首页</a>&nbsp;&nbsp;<i
            class="fa fa-angle-right"></i>
    </li>
    <li><a href="{% url 'product:index' %}">产品列表</a>&nbsp;<i class="fa fa-angle-right"></i></li>
    <li class="active">{% if product_id %}产品修改{% else %}产品添加{% endif %}</li>
{% endblock %}

{% block context %}

    <div class="row">
        <div class="col-lg-12">
            <div class="portlet box portlet-blue">
                <div class="portlet-header">
                    <div class="caption">{% if product_id %}产品修改{% else %}产品添加{% endif %}</div>
                    <div class="tools"><i class="fa fa-chevron-up"></i><i data-toggle="modal"
                                                                          data-target="#modal-config"
                                                                          class="fa fa-cog"></i><i
                            class="fa fa-refresh"></i><i class="fa fa-times"></i>
                    </div>
                </div>
                <div class="portlet-body pan">
                    <form action="" class="form-horizontal form-separated" id="my_form" method="post">

                        {% csrf_token %}
                        <div class="form-body pdl">

                            <div class="form-group">
                                <label class="col-md-3 control-label">名称</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="name">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">单价</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="price">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">库存</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="inventory">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">展示到官网</label>
                                <div class="col-md-6">
                                    <select class="form-control" name="website_show">
                                        <option value="1" selected>展示</option>
                                        <option value="2">不展示</option>
                                    </select>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-md-3 control-label">成本</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="cost">
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-md-3 control-label">排序</label>
                                <div class="col-md-6">
                                    <input type="number" class="form-control" name="order">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">规格</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="size">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">重量</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="weight">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">工期</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="work_time">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">图片</label>
                                <div class="col-md-6">
                                    <span class="btn btn-success fileinput-button"><i
                                            class="glyphicon glyphicon-plus"></i>&nbsp;<span>添加图片</span>
                                        <input type="file" onchange="save_img(this)" id="img_url" name="img_files"
                                               multiple="multiple"
                                               accept="image/*">
                                        </span>&nbsp; &nbsp;
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">官网图片</label>
                                <div class="col-md-6">
                                    <span class="btn btn-success fileinput-button"><i
                                            class="glyphicon glyphicon-plus"></i>&nbsp;<span>官网图片</span>
                                        <input type="file" onchange="save_img(this)" id="website_img" name="img_files"
                                               accept="image/*">
                                        </span>&nbsp; &nbsp;
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">相关文件</label>
                                <div class="col-md-6">
                                    <span class="btn btn-success fileinput-button"><i
                                            class="glyphicon glyphicon-plus"></i>&nbsp;<span>相关文件</span>
                                        <input type="file" onchange="save_img(this)" id="related_img" name="img_files"
                                               accept="file/*">
                                        </span>&nbsp; &nbsp;
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">备注</label>
                                <div class="col-md-6">
                                    <textarea id="remark" name="remark" rows="6"
                                              class="form-control"></textarea>
                                </div>
                            </div>

                            {#                            <div class="form-group">#}
                            {#                                <label class="col-md-3 control-label"></label>#}
                            {#                                <div class="col-md-6">#}
                            {#                                    <div class="input-group datetimepicker-default date">#}
                            {#                                        <input type="text" name="datetime" class="form-control"/><span#}
                            {#                                            class="input-group-addon"><i class="fa fa-calendar"></i></span>#}
                            {#                                    </div>#}
                            {#                                </div>#}
                            {#                            </div>#}
                            {##}
                            {#                            <div class="form-group">#}
                            {#                                <label class="col-md-3 control-label">Disable date</label>#}
                            {#                                <div class="col-md-6">#}
                            {#                                    <div class="input-group datetimepicker-disable-date date">#}
                            {#                                        <input type="text" name="time" class="form-control"/><span#}
                            {#                                            class="input-group-addon"><i class="fa fa-clock-o"></i></span>#}
                            {#                                    </div>#}
                            {#                                </div>#}
                            {#                            </div>#}
                            {##}
                            {#                            <div class="form-group">#}
                            {#                                <label class="col-md-3 control-label">Events and linked pickers</label>#}
                            {#                                <div class="col-md-6">#}
                            {#                                    <div class="input-group datetimepicker-start date mbl">#}
                            {#                                        <input type="text" name="datetime_event_start" class="form-control"/><span#}
                            {#                                            class="input-group-addon"><i class="fa fa-calendar"></i></span>#}
                            {#                                    </div>#}
                            {#                                </div>#}
                            {#                                <div class="col-md-6 col-md-offset-3">#}
                            {#                                    <div class="input-group datetimepicker-end date">#}
                            {#                                        <input type="text" name="datetime_event_end" class="form-control"/><span#}
                            {#                                            class="input-group-addon"><i class="fa fa-clock-o"></i></span>#}
                            {#                                    </div>#}
                            {#                                </div>#}
                            {#                            </div>#}
                        </div>
                        <div class="form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                {% if product_info %}
                                    <button type="submit" class="btn btn-primary">修改</button>
                                    &nbsp;{% else %}
                                    <button type="submit" class="btn btn-primary">提交</button>
                                {% endif %}
                                {#                                <button id="file_upload" type="submit" class="btn btn-primary" style="display: none">#}
                                {#                                    提交#}
                                {#                                </button>#}
                                <button onclick="return_button()" type="button" class="btn btn-default">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}
    {#    <script src="{% static 'vendors/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/moment/moment.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-timepicker/js/bootstrap-timepicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-clockface/js/clockface.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-colorpicker/js/bootstrap-colorpicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-switch/js/bootstrap-switch.min.js' %}"></script>#}
    {#    <script src="{% static 'vendors/jquery-maskedinput/jquery-maskedinput.js' %}"></script>#}
    {#    <script src="{% static 'vendors/charCount.js' %}"></script>#}
    {#    <script src="{% static 'js/form-components.js' %}"></script>#}
    <!--for upload page-->
    <script src="{% static 'vendors/jquery-file-upload/js/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'vendors/jquery-file-upload/js/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'vendors/jquery-file-upload/js/jquery.fileupload.js' %}"></script>

    <!--for 验证 page-->
    <script src="{% static 'vendors/jquery-validate/jquery.validate.min.js' %}"></script>
    <script src="{% static 'js/form-validation.js' %}"></script>
    <script src="{% static 'my/my_verify.js' %}"></script>

    <script>
        var flag = false;
        $.validator.setDefaults({
            submitHandler: function (form) {
                if ("{{ product_info }}") {
                    edit_data()
                }
                else {
                    if (flag) {
                        return false
                    }
                    flag = true;
                    commit_data()

                }
            }
        });
        // 添加
        var post_url = "{% url 'product:add' %}";
        function commit_data() {
            var data = $("form").serialize();
            $.ajax({
                type: 'POST',
                url: post_url,
                data: data,
                success: function (data) {
                    if (data.status == 1) {
                        alert(data.msg);
                        window.location.href = "{% url 'product:index' %}"
                    }
                    else {
                        alert(data.msg);
                        window.location.reload()
                    }
                },
                error: function (request) {
                    alert("服务器异常, 请刷新重试");

                }
            });
        }
        // 修改
        function edit_data() {
            var data = $("form").serialize();
            $.ajax({
                type: 'POST',
                url: post_url,
                data: data,
                success: function (data) {
                    if (data.status == 1) {
                        alert(data.msg);
                        window.location.href = "{% url 'product:index' %}"
                    }
                    else {
                        alert(data.msg);
                        window.location.reload()
                    }
                },
                error: function (request) {
                    alert("服务器异常");
                }
            });
        }
    </script>
    <script>
        function save_img(f) {
            var fileCount = f.files.length;
            if (fileCount > 3) {
                alert("最多上传三张图片");
                return false;
            }
            $(f).parent().parent().find(".show_file").remove();
            $('#'+$(f).id+'').fileupload({
                url: "{% url 'files:save_img' %}",
                dataType: 'json',
                done: function (e, data) {
                    var html = "<div class='show_file'>";
                    if (f.id == "related_img") {
                        html += "<input style='display: none' name='" + f.id + "' value = '" + data.result.img_url + "'><a class='show_img' href='" + data.result.img_url + "'>" + data.result.name + "</a>";
                    }
                    else if (f.id == "website_img") {
                        html += "<input style='display: none' name='" + f.id + "' value = '" + data.result.id + "'><a class='show_img' href='" + data.result.img_url + "'>" + data.result.name + "</a>";
                    }
                    else {
                        html += "<input style='display: none' name='" + f.id + "' value = '" + data.result.id + "'><a class='show_img' href='" + data.result.img_url + "'><img style='width: 23%'src=" + data.result.img_url + "></a>";
                    }
                    html += "</div>";
                    $('#upload_files').parent().parent().append(html);
                }
            });
        }


        $('#img_url').fileupload({
            url: "{% url 'files:save_img' %}",
            dataType: 'json',
            done: function (e, data) {
                var html = "<div class='show_file'>";
                html += "<input style='display: none' name='img_url' value = '" + data.result.img_url + "'><a class='show_img' href='" + data.result.img_url + "'><img style='width: 23%'src=" + data.result.img_url + "></a>";
                html += "</div>";
                $('#img_url').parent().parent().append(html);
            }
        });


        $('#website_img').fileupload({
            url: "{% url 'files:save_img' %}",
            dataType: 'json',
            done: function (e, data) {
                var html = "<div class='show_file'>";
                html += "<input style='display: none' name='website_img' value = '" + data.result.id + "'><a class='show_img' href='" + data.result.img_url + "'><img style='width: 23%'src=" + data.result.img_url + "></a>";
                html += "</div>";
                $('#website_img').parent().parent().append(html);
            }
        });


        $('#related_img').fileupload({
            url: "{% url 'files:save_img' %}",
            dataType: 'json',
            done: function (e, data) {
                var html = "<div class='show_file'>";
                html += "<input style='display: none' name='related_img' value = '" + data.result.id + "'><a target='_blank' class='show_img' href='" + data.result.img_url + "'>" + data.result.name + "</a>";
                html += "</div>";
                $('#related_img').parent().parent().append(html);
            }
        });


    </script>
    <script>
        $(document).ready(function () {
            if ("{{ product_info }}") {
                post_url = "/business/product/edit/{{ product_info.id }}";
                $("input[name='name']").val("{{ product_info.name }}");
                $("input[name='price']").val("{{ product_info.price }}");
                $("input[name='inventory']").val("{{ product_info.inventory }}");
                $("input[name='cost']").val("{{ product_info.cost }}");
                $("input[name='size']").val("{{ product_info.size }}");
                $("input[name='weight']").val("{{ product_info.weight }}");
                $("input[name='order']").val("{{ product_info.order }}");
                $("input[name='work_time']").val("{{ product_info.work_time }}");
                $("select[name='website_show']").val("{{ product_info.website_show }}");
                $("textarea[name='remark']").val("{{ product_info.remark }}");
                var html = "";
                html = "<div class='show_file'>"
                {% for i in img_url %}
                    html += "<input style='display: none' name='img_url' value='{{ i }}'> " +
                        "<a target='_blank' class='show_img' href='{{ i }}'>" +
                        "<img style='width: 23%'src='{{ i }}'></a>";
                {% endfor %}
                html += "</div>";
                $('#img_url').parent().parent().append(html);

                if('{{ product_info.website_img }}'){
                    html = "<div class='show_file'>";
                        html += "<input style='display: none' name='website_img' value='{{ product_info.website_img.id }}'> " +
                            "<a target='_blank' class='show_img' href='{{ product_info.website_img.img.url }}'>" +
                            "<img style='width: 23%'src='{{ product_info.website_img.img.url }}'></a>";
                    html += "</div>";
                    $('#website_img').parent().parent().append(html);
                }

                if('{{ product_info.related_img }}'){
                    html = "<div class='show_file'>";
                        html += "<input style='display: none' name='related_img' value='{{ product_info.related_img.id }}'> " +
                            "<a class='show_img' target='_blank' href='{{ product_info.related_img.img.url }}'>{{ product_info.related_img.name }}</a>";
                    html += "</div>";
                    $('#related_img').parent().parent().append(html);
                }
            }

        });
    </script>
{% endblock %}